<template>
	<section>
		<el-table
				v-loading="loading"
				ref="multipleTable"
				:data="prodData"
				tooltip-effect="dark"
				style="width: 100%"
				@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column prop="prodSupTitle" label="商品名称" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column label="商品图片" width="120">
				<template slot-scope="scope"><img width="80" height="80" :src="scope.row.prodImage[0]" alt="#"></template>
			</el-table-column>
			<el-table-column prop="prodCategory" label="商品类别" show-overflow-tooltip></el-table-column>
			<el-table-column prop="prodSubTitle" label="商品描述" show-overflow-tooltip></el-table-column>
			<el-table-column label="原价/折扣价" show-overflow-tooltip>
				<template slot-scope="scope">
					<el-tag type="success">{{scope.row.originPrice}}</el-tag>
					<el-tag type="info">{{scope.row.currentPrice}}</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" show-overflow-tooltip>
				<template slot-scope="scope">
					<el-button type="danger" @click="deleteProd(scope.row._id, scope.$index)">删除</el-button>
					<el-button type="warning" @click="publish(scope.row._id, scope.$index)">上架</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
				background
				layout="prev, pager, next"
				page-size="20"
				:total="totalCount">
		</el-pagination>
		<div style="margin-top: 20px">
			<el-button @click="toggleSelection()">取消选择</el-button>
		</div>
	</section>
</template>
<script>
    //import NProgress from 'nprogress'
    export default {
        data() {
            return {
                loading: true,
                prodData: [],
                totalCount: 0
            }
        },
        methods: {
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            deleteProd(id, index) {
                this.$http.deleteProd({prodid: id})
                    .then(res=>{
                        if(res.data.code === 10013){
                            this.prodData.splice(index, 1);
                            this.$notify({
                                title: '成功',
                                message: '删除商品成功',
                                type: 'success'
                            });
                        }else{
                            this.$notify({
                                title: '失败',
                                message: '删除商品失败',
                                type: 'error'
                            });
                        }
                    })
                    .catch(err=>{
                        this.$notify({
                            title: '失败',
                            message: '删除商品失败',
                            type: 'error'
                        });
                    });
            },
            publish(id, index) {
                this.$http.publish({prodid: id})
                    .then(res=>{
                        if(res.data.code === 10009) {
                            this.prodData.splice(index, 1);
                            this.$notify({
                                title: '成功',
                                message: '商品上架成功',
                                type: 'success'
                            });
                        }else{
                            this.$notify({
                                title: '失败',
                                message: '商品上架失败',
                                type: 'error'
                            });
                        }
                    })
                    .catch(err=>{
                        this.$notify({
                            title: '失败',
                            message: '商品上架失败',
                            type: 'error'
                        });
                    });
            },
        },
        created() {
            this.$http.getProd({status: 'unpublished'})
                .then(res => {
                    console.log(res);
                    if(res.data.code = 10003) {
                        this.prodData = res.data.data;
                        this.loading = false;
                    }else{
                        this.$notify({
                            title: '警告',
                            message: '获取商品数据失败,请刷新重试!',
                            type: 'warning'
                        });
                    }
                })
                .catch(()=>{
                    this.$notify({
                        title: '警告',
                        message: '获取商品数据失败,请刷新重试!',
                        type: 'warning'
                    });
                });
            this.$http.getProdTotalCount()
				.then(res=>{
				    if(res.data.code === 10015){
				        this.totalCount = res.data.data;
					}
				    console.log(res);
				})
				.catch(err=>{
				    console.log(err);
				})
        }
    };
</script>

<style scoped>

</style>
